<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-08-27 10:53:42
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-08-30 09:00:33
-->
<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="son modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div style="width:1880px!important;margin: 1.75rem auto;">
        <div class="modal-content">
            <form style="height: 900px!important;overflow: auto;" *ngIf="active" #bopForm="ngForm" novalidate
                (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>物料选择</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="modal-body" style="height: 630px!important;overflow: auto;">
                        <div class="form-group" style="display: flex; position: relative;">
                            <label for="materialCode" style="margin-top: 7px;">代号：</label>
                            <input style="width: 200px;margin-left: 10px;" id="materialCode" #modelInput="ngModel"
                                type="text" name="materialCode" class="form-control" [(ngModel)]="materialCode"
                                maxlength="256" />
                            <label for="modelName" style="margin-top: 7px;margin-left: 50px;">名称：</label>
                            <input style="width: 200px;margin-left: 10px;" id="model" type="text" name="model"
                                class="form-control" [(ngModel)]="name" maxlength="256" />
                            <button style="margin-left: 20px;" pButton type="button" label="查询"
                                (click)="getTableList()"></button>
                            <button style="margin-left: 20px;" pButton type="button" label="重置"
                                (click)="resert()"></button>
                        </div>
                        <div class="row align-items-center" style="margin-top: 25px;">
                            <div class="primeng-datatable-container">
                                <p-table #dataTable [value]="primengTableHelper.records"
                                    (onLazyLoad)="getTableList($event)"
                                    rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                    [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                    [responsive]="primengTableHelper.isResponsive"
                                    [resizableColumns]="primengTableHelper.resizableColumns" [(selection)]="selectRow">
                                    <ng-template pTemplate="header" selectionMode="multiple">
                                        <tr>
                                            <th style="width: 50px">
                                                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                            </th>
                                            <th style="width: 50px">序号</th>
                                            <th style="width: 150px">代号</th>
                                            <th style="width: 150px">名称</th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                        <tr>
                                            <td style="width: 50px">
                                                <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                            </td>
                                            <td style="width: 50px">{{rowIndex+1}}</td>
                                            <td style="width: 150px">{{record.code}}</td>
                                            <td style="width: 150px">{{record.name}}</td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                                <div class="primeng-paging-container">
                                    <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                        (onPageChange)="getTableList($event)"
                                        [totalRecords]="primengTableHelper.totalRecordsCount"
                                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                    </p-paginator>
                                    <span class="total-records-count">
                                        {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer" style="justify-content: center;">
                        <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i>
                            <span>选择</span></button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>